<template>
    <div>
        <div class="ser_div">
            <el-row>
                <el-col>
                    <el-row style="display: flex; align-items: center">
                        <el-col :span="8" style="text-align: center"> 材料名称 </el-col>
                        <el-col :span="16">
                            <el-input v-model="ser.material_name"></el-input>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="4">
                    <el-button @click="clolr_click" class="add_btn" icon="el-icon-search">
                        搜索</el-button>
                    <el-button @click="add_color" v-permission="'system:users:add'" icon="el-icon-plus"
                        class="add_btn">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="dataList" stripe style="width: 100%" border>
            <el-table-column prop="id" label="ID" width="60"> </el-table-column>
            <el-table-column prop="material_name" label="材料名"> </el-table-column>
            <el-table-column prop="material_number" label="材料数量"> </el-table-column>
            <el-table-column prop="employee_name" label="员工名"> </el-table-column>
            <el-table-column prop="job_type" label="工种"> </el-table-column>
            <el-table-column prop="get_time" label="领料时间"> </el-table-column>
            <el-table-column prop="created_at" label="创建日期"> </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="set_product(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                        title="是否删除这条数据？" @confirm="del_product(scope.row)">
                        <el-button slot="reference" type="text" icon="el-icon-delete">
                            删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                @prev-click="prev" @next-click="next" :current-page.sync="pagination.page"
                :page-size="pagination.per_page" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="title" :visible.sync="isProduct" width="30%" :close-on-click-modal="false"
            @close="close_dialog">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- <el-form-item label="材料名称" prop="material_name">
                    <el-input v-model="ruleForm.material_name" @input="changeValue"></el-input>
                </el-form-item> -->
                <el-form-item label="材料列表" prop="material_name">
                    <el-select
                        filterable
                        v-model="ruleForm.material_name"
                        placeholder="请选择材料"
                        style="width: 100%"
                    >
                        <el-option
                        v-for="item in materialList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="材料数量" prop="material_number">
                    <el-input v-model="ruleForm.material_number" @input="changeValue" type="number"></el-input>
                </el-form-item>
                <el-form-item label="选择员工" prop="employee_name">
                    <el-select v-model="ruleForm.employee_name" placeholder="请选择员工" style="width: 100%"
                        @change="changeValue">
                        <el-option v-for="item in YuanGongList" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工种" prop="job_type">
                    <el-select v-model="ruleForm.job_type" clearable placeholder="请选择" style="width: 100%"
                        @change="changeValue">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.job_type" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领料时间" prop="get_time">
                    <el-date-picker style="width: 100%" v-model="ruleForm.get_time" type="date"
                        format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isProduct = false">取 消</el-button>
                <el-button type="primary" @click="submitadd('ruleForm')">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getJobTypeList,
    getYuanGongList,
    createMaterialRecord,
    getMaterialRecordList,
    delMaterialRecord,
    getMaterialList
} from "@/api/product/index";
export default {
    data() {
        return {
            YuanGongList: [],
            ser: {
                material_name: ""
            },
            title: "",
            isProduct: false,
            dataList: [],
            typeList: [],
            materialList: [],
            ruleForm: {
                material_name: "",
                material_number: 0,
                employee_name: [],
                job_type: [],
                get_time: "",
                id: "",
            },
            rules: {
                material_name: [
                    {
                        required: true,
                        message: "请选择材料",
                        trigger: "blur",
                    },
                ],
                material_number: [
                    {
                        required: true,
                        message: "请填写材料数量",
                        trigger: "blur",
                    },
                ],
                employee_name: [
                    {
                        required: true,
                        message: "请选择员工",
                        trigger: "blur",
                    },
                ],
                job_type: [
                    {
                        required: true,
                        message: "请选择工种",
                        trigger: "blur",
                    },
                ],
                get_time: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "blur",
                    },
                ]
            },
            pagination: {
                per_page: 10,
                page: 1,
            },
            total: 0,
            productList: [],
            ColorList: [],
        };
    },
    mounted() {
        this.getlist();
        this.get_MaterialList();
        this.get_YuanGongList();
        this.getType();
    },
    methods: {
        changeValue() {
            this.$forceUpdate();
        },
        get_YuanGongList() {
            getYuanGongList().then((res) => {
                if (res.code == 200) {
                    this.YuanGongList = res.data;
                }
            });
        },
        getType() {
            getJobTypeList().then((res) => {
                if (res.code == 200) {
                    this.typeList = res.data.data;
                }
            });
        },
        // 材料列表
        get_MaterialList() {
        getMaterialList().then((res) => {
            if (res.code == 200) {
            this.materialList = res.data.data;
            console.log(this.materialList);
            }
        });
        },
        close_dialog() {
            this.ruleForm = {
                product_ids: [],
                color_names: [],
                id: ""
            };
        },
        del_product(row) {
            delMaterialRecord({
                id: row.id
            }).then((res) => {
                if (res.code == 200) {
                    this.isProduct = false;
                    this.$message.success("提交成功");
                    this.getlist();
                }
            });
        },
        getlist() {
            getMaterialRecordList({ ...this.pagination, ...this.ser }).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
        set_product(row) {
            console.log(row)
            this.ruleForm= {
                material_name: row.material_id,
                material_number: row.material_number,
                employee_name: row.employee_id,
                job_type:row.job_type_id,
                get_time:row.get_time,
                id: row.id,
            },
            this.isProduct = true;
        },
        add_color() {
            this.title = "新增领料";
            this.isProduct = true;
            this.$nextTick(function () {
                this.$refs.ruleForm.resetFields();
            });
        },
        submitadd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm)
                    let item = this.ruleForm
                    let yuan= this.YuanGongList.filter(li=>li.id==item.employee_name)
                    let job= this.typeList.filter(li=>li.id==item.job_type)
                    let material = this.materialList.filter(li=>li.id==item.material_name)
                    let data = {
                        material_name: material[0].name, //材料名称
                        material_id: material[0].material_id, //材料id
                        material_id: item.id, //材料id
                        material_number: item.material_number, //材料数量
                        employee_name: yuan[0].username, //员工名
                        employee_id: yuan[0].id, //员工id
                        job_type:job[0].job_type, //工种
                        job_type_id: job[0].id, //工种id
                        get_time: item.get_time //领取时间
                    }
                    createMaterialRecord(data).then((res) => {
                        if (res.code == 200) {
                            this.isProduct = false;
                            this.$message.success("提交成功");
                            this.getlist();
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val;
            this.getlist();
        },
        prev() {
            this.pagination.page = this.pagination.page - 1;
            this.getlist();
        },
        next() {
            this.pagination.page = this.pagination.page + 1;
            this.getlist();
        },
        clolr_click() {
            this.pagination = {
                per_page: 10,
                page: 1,
            };
            getMaterialRecordList({ material_name: this.ser.material_name, ...this.pagination }).then((res) => {
                if (res.code == 200) {
                    this.dataList = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
    },
};
</script>

<style></style>